// 动画  显示|隐藏   进入|离开
// 6种状态 1 进入前 2 进入中 3 进入后  4 5 6 离开
// v-enter-from v-enter-active v-enter-to

// 准备好动画
// @keyframes demo{ }

// 谁做动画 给谁包 transition  显示隐藏 切换类名

// 坑  注意 transition  包裹的层级
// appear 加载时就播放动画
// <transition appear name="test">
//  <h1 v-show>
// <transition/>

//v-enter-active   v对应name="test"  多个不同动画同时进行

//test-leave-active{ animation: demo 0.5s linear reverse}

// 过渡
// transition 包裹后  一共加了 三个 类名
// 进入的起点   离开的终点
// .v-enter-from , .v-leave-to{transform:translateX(-100%)}
// 进入的终点   离开的起点
// .v-enter-to , .v-leave-from{transform:translateX(0)}
// v-enter-from ---> v-enter-to || v-leave-from ---> v-leave-to

// 对 动画元素添加  过度 h1{transition:0.5s linear}
// 或者 v-enter-active,v-leave-active{transition:0.5s linear}

// 多个元素做动画  必须要  加 key
// <transition-group
// <h1 key="1"

// 利用第三方 库  完成动画 效果
// Animate.css        npm
// npm i animate.css
import 'animate.css'
// <transition
// appear
// 依靠下面 三个 属性  实现动画  参考官网
// name = "animate_animated animate_bounce"
// enter-active-class="XXXXX"        显示
// leave-active-class="XXXXX">       隐藏

/*
  动画 ==========================
  产生的条件  是组件的 移除 和 创建  内容变化不会触发动画
  组件--DOM 添加 key="id"  就会因为内容的不同重新创建组件触发动画

  动画执行顺序
  当前元素--out
  mode="in-out"   新元素先进入   当前元素离开
  mode="out-in"  当前元素先离开  当前元素先离开
*/

/*
   XtxMessage
   动画用在 v-if 等 移除条件  比如骨架屏
   但是有些组件  是自己独立存在的  可以 设置一个 变量来控制 自身的 创建与移除
   一开始 为 false  组件挂载完毕  为 true
    const visible = ref(false)
		onMounted(() => {
			visible.value = true
		})


    总结
    1 v-if 加 transition 包裹   可以实现 来去  两种动画
    from to  相当于  动画开始结束状态  放  opacity  transform
    active   相当于 执行 时机         放 transition @keyframes
    2 hover  类名 实现  来去  两种动画  因为 hover 该组件一直存在
      opacity  transform --> transition
    3 v-if  或者   onMounted  添加类名
      该状况  组件 离开 不会显示离开动画   方式 同 2
      类名的变化  需要延时触发才会生效  setTimeout(() =>{})    显示时

    4 添加类名  但是 不用  v-if  而是模仿 hover样式 将v-if控制 组件显示或者消失
     改为  添加 类名  设置 opacity 0  height 0 translate 等  改变 是否显示
*/
